<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../day54/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            padding: 20px 10px;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 45px;
            text-indent: 10px;
            border: 1px solid #333;
        }

        .buttonGroup {
            margin-top: 20px;
        }

        .active {
            background-color: #6ff;
        }
    </style>
</head>
<body>
    <div id="demo" class="wrap">
        <h3 id="title">批量操作元素</h3>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li class="last"><span>06</span></li>
        </ul>
    </div>
</body>
<script>
    //  on()  添加事件监听
    // $(ele).on(eventType,data,callback)
    // ele        绑定事件的元素
    // eventType  绑定事件的类型
    // data       (可选参数)当一个事件被触发时要传递event.data给事件处理函数。
    // callback   事件触发时的回调函数

    /* $(".first").on("click",{ a:1, b:2 },function(e){
        // jquery中的事件对象 => 是对原始事件对象二次处理之后的生成的(不影响使用)
        console.log(e.data);
        $(this).css({ background: "red" });
    }); */

    function clickHandler_1(e){
        $(this).css({ background: "red" });
    };
    function clickHandler_2(e){
        alert($(this).index());
    };

    $(".list li").on("click",{a:1,b:2},clickHandler_1);
    $(".list li").click(clickHandler_2);

    $(".first").on("mouseenter", function(e){
        $(this).text("鼠标移入");
    }).on("mouseleave",function(){
        $(this).text("鼠标移出")
    })


    // off()  删除事件监听
    // $(ele).off(eventType,callback)
    // ele        绑定事件的元素
    // eventType  绑定事件的类型
    // callback   事件触发时的回调函数
    // 注意: off()  删除事件监听对应回调函数清除

    // 移除list li的点击事件     => 对应回调函数清除
    // $(".list li").off("click",clickHandler_1);
    // $(".list li").off("click",clickHandler_2);

    // 移除list li的点击事件     => 对应事件类型清除
    // $(".list li").off("click");

    // 移除first的所有事件
    $(".first").off();
</script>
</html>